<template>
  <div>
    <div ref="echats1" style="width: 500px; height: 500px;"></div>
  </div>
</template>

<script>
// 引入echarts包
import * as echarts from 'echarts'
export default {
  // 页面加载完成,自动执行,调用函数
  mounted () {
    this.showCharts()
  },
  // vme
  methods: {
    showCharts () {
      // 初始化echarts,到div 元素中
      const myChart = echarts.init(this.$refs.echats1)
      const option = {
        title: {
          text: "Anscombe's quartet",
          left: 'center',
          top: 0
        },
        grid: [
          { left: '7%', top: '7%', width: '38%', height: '38%' },
          { right: '7%', top: '7%', width: '38%', height: '38%' },
          { left: '7%', bottom: '7%', width: '38%', height: '38%' },
          { right: '7%', bottom: '7%', width: '38%', height: '38%' }
        ],
        tooltip: {
          formatter: 'Group {a}: ({c})'
        },
        xAxis: [
          { gridIndex: 0, type: 'category', data: ['A', 'B', 'C', 'D', 'E'] },
          { gridIndex: 1, data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] },
          { gridIndex: 2, min: 0, max: 20 },
          { gridIndex: 3, min: 0, max: 20 }
        ],
        yAxis: [
          { gridIndex: 0 },
          { gridIndex: 1, min: 0, max: 15 },
          { gridIndex: 2, min: 0, max: 15 },
          { gridIndex: 3, min: 0, max: 15 }
        ],
        series: [
          {
            name: 'I',
            type: 'line',
            xAxisIndex: 0,
            yAxisIndex: 0,
            data: [10, 22, 28, 43, 49]
          },
          {
            name: 'II',
            type: 'bar',
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: [5, 20, 46, 70, 80, 90]
          },
          {
            name: 'III',
            type: 'pie',
            xAxisIndex: 2,
            yAxisIndex: 2,
            // 少数圆形的组件或系列，可以使用“中心半径定位”，例如，pie（饼图）、sunburst（旭日图）、polar（极坐标系）。
            center: ['25%', '75%'],
            radius: '25%',
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ]
          },
          {
            name: 'IV',
            type: 'scatter',
            xAxisIndex: 3,
            yAxisIndex: 3,
            data: [
              [10.0, 8.04],
              [8.07, 6.95],
              [13.0, 7.58],
              [9.05, 8.81],
              [11.0, 8.33],
              [14.0, 7.66],
              [13.4, 6.81],
              [10.0, 6.33],
              [14.0, 8.96],
              [12.5, 6.82],
              [9.15, 7.2],
              [11.5, 7.2],
              [3.03, 4.23],
              [12.2, 7.83],
              [2.02, 4.47],
              [1.05, 3.33],
              [4.05, 4.96],
              [6.03, 7.24],
              [12.0, 6.26],
              [12.0, 8.84],
              [7.08, 5.82],
              [5.02, 5.68]
            ]
          }
        ]
      };
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped></style>
